import React, { Component, createRef, forwardRef } from "react";

// 可以使用ref来获取到子组件的实例(包括了子组件的所有的属性方法等)
// class Child extends Component {
//   state = {
//     count: 10,
//   };
//   render() {
//     return <div>这是child子组件</div>;
//   }
// }

// 子组件只能使用类组件，才能被获取到实例
// 函数组件式没有实例的

// forwardRef是一个高阶组件
// 作用是用来传递ref的
// 函数组件虽然没有实例，但是可以通过forwardRef这个高阶组件来传递ref，可以让父组件获取到子组件的dom实例
const Child = forwardRef((props, ref) => {
  return (
    <>
      <div>这是child子组件</div>
      <input type="text" ref={ref} />
    </>
  );
});

class App extends Component {
  state = {};
  child = createRef();
  render() {
    return (
      <>
        <h2>用ref来获取子组件实例</h2>
        <Child ref={this.child} />
      </>
    );
  }
  componentDidMount() {
    console.log(this.child.current);
  }
}

export default App;
